Jetpack Compose

大象笔记 > 标签 > Jetpack Compose

Android i18n - 多语言版本

由于发现上架 Google Play 之后,中国区的 Android APP 无法显示 AdMob 广告,但是其他国家却非常正常。所以,我决定给 App 添加英文翻译,使其同时支持中文,和英文。 为文本添加翻译文件 鼠标放在待翻译的字符串上,按下 Alt + Enter 同样适用于 Jetpack Compose 组件。 不同语言对应的文本文件 例如: 中文:res/values-zh/strings.xml 法语:res/values-fr/strings.xml 日语:res/values-ja/strings.xml 默认文本 res/values/strings.xml And ...

阅读全文...

Android Jetpack Compose 可组合函数 @Composable

Android Jetpack Compose 里可组合函数这个名字太唬人,一眼看上去,一头雾水。 Composable 的英文翻译 可组合函数,英文原文为 Composable Function。 我一直以为 Compose 只有“写作”的意思,原来其还有“组成”的意思。所以,Composable 可以翻译为“可组合”。 可组合函数的功能 代码中定义 APP 的 UI。 可组合函数的定义 函数前,加上注解 @Composable。例如,使用 Android Studio 中自带的 Empty Compose Activity template 创建的 App,自带一个可组合函数 Greeti ...

阅读全文...

Android Jetpack Compose 的布局基础

我想用 Android Jetpack Compose 新建一个 FloatingActionButton,找到 StackOverflow 上的一个答案,发现居然看不懂。。。 感觉还是概要地了解一下 Jetpack Compose 的布局基础比较好。 官方 Compose 布局文档 参考这里 https://developer.android.com/jetpack/compose/layout Column 最常用的自上而下的布局: import androidx.compose.foundation.layout.Column Column { Text("第一行&q ...

阅读全文...

Jetpack Compose 1.0 版正式发布

我期待已久的 Android Jetpack Compose 终于出 1.0 正式版了。 正好有个 App 的小功能想实现,决定用 Jetpack Compose 实现。毕竟 XML 布局写列表太复杂了,一时不用,就忘了怎么实现。 连复制黏贴都没有头绪。而 Compose 相对简单很多。不知道鸿蒙是否能跟进,:) 周五晚上闲的没事就把家里台式机上的 Android Studio 做了升级。 对应的 Android Studio 版本 Android Studio Arctic Fox (2020.3.1) Stable 正式支持了 Compose,在新建 Activity 时,可以选择 Com ...

阅读全文...

Jetpack Compose 多界面间的路由跳转

目录结构 一个简单 Demo 的文件分离结构: Home Screen:首页列表 Edit Screen (detail):编辑页 NavHost (router):路由定义 Main Activity 添加依赖 dependencies { implementation "androidx.navigation:navigation-compose:2.4.0-alpha08" } 添加之后,不要忘了点击 Android Studio 右上角的 Sync Now。 否则像 rememberNavController 这样的函数,无法通过 Alt + Ente ...

阅读全文...

Jetpack Compose State

目标 目标是写一个基于 jetpack compose 的表单页面,用于将一系列产品数据存储于本地 sqlite 数据库中。 但是真正动手时,发现不知道如何获取 input 组件的输入值,这不再是 findbyid 那种获取输入值的形式。 所以,不得不了解一下 compose state 的机制。 还有另外一个疑问。对于 data class 这样的多字段结构化数据,state 机制如何方便地映射到每一个输入组件上。 什么是 state State in an application is any value that can change over time. For example it ...

阅读全文...

jetpack compose 日期选择组件

发现目前正在用的 jetpack compose 中没有现成的 Material Design 样式的日期选择组件。 在 Stack Overflow 上找到一个解决方法: AppCompatActivity instead of ComponentActivity in Jetpack compose class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) ...

阅读全文...

Jetpack Compose 使用 MutableLiveData 及 observeAsState 实现详情页的数据查询

思路 对 viewmodel 中 livedata 的监听也是返回一个 state. 但这个 state 是不能像 compose 内的 state 直接修改的。要修改,需要调用 viewmodel 中的函数来间接修改。 尝试过的方案 方案一(失败):ViewModel 中定义 mutableStateOf, Composable 中定义 mutableStateOf。mutableStateOf 看起来是初始化那一刻用的啥值,就是啥值,无法自动更新。 方案二(可行):ViewModel 中定义 MutableLiveData,Composable 中使用 observeAsState 监听 ...

阅读全文...

Jetpack Compose 配合 Room, ViewModel 操作数据库

放到一个文件中? 感觉 entity, dao, repository 可以放到一个文件中, 但是 database 还是需要独立出来,因为一个 database 可能包含多个 entity。 这样找 entity 进行修改时比较方便。 为何需要 ViewModel 屏幕在横屏、竖屏旋转切换时,Activity 会被重建。如果临时状态数据存储在 Activity 中, 横竖屏切换后,会导致状态重置,例如计数器重置,出现 bug。 所以,需要一个能保存状态的机制,于是有了 ViewModel。 为何需要 ViewModelProvider.Factory 在 Todo Demo App 中,可以 ...

阅读全文...

Jetpack Compose 中使用 Snackbar 提示信息

之所以想记录一下 Jetpack Compose 中 Snackbar 的使用,主要是发现 Snackbar 代码示例引入了两个我没有见过的概念: rememberScaffoldState rememberCoroutineScope snackbar 中文是,小吃店 ... snack, 小吃的意思。 snackbar 的交互形式非常独特,是屏幕底部出现一条横幅,包含提示信息。还可以内置一个按钮,例如撤销操作等。 Compose 中 Snackbar 的使用 val scaffoldState = rememberScaffoldState() val scope = remember ...

阅读全文...

Jetpack Compose 中使用更多 material 图标

我在 Compose 中使用图标,但是默认情况下, androidx.compose.material.icons.Icons 提供的图标很少。 import androidx.compose.material.icons.Icons Icon( Icons.Filled.CheckCircle, contentDescription = "Date Picker" ) 很多在 https://fonts.google.com/icons?selected=Material+Icons material icons 中有的图标,都找不到。比如我想找一个日期选择的图标 ...

阅读全文...

Android Studio flamingo 使用 jetpack compose 模板新建项目

今天将 Android Studio 升级到了最新版本 Android Studio Flamingo 2022.2.1 Patch 1。 但是新建项目的时候发现找不到 Jetpack Compose 的模板选项了,印象中之前版本是明确标注了哪些模板是基于 Compose 的。 后来在 Android Studio 的官方更新说明里找到了: https://developer.android.com/studio/releases?hl=zh-cn#updates-to-npw-nmw Android Studio Flamingo Canary 6 添加了用于创建项目或模块的新模板。默认情 ...

阅读全文...